import { View, Text, StyleSheet, TouchableOpacity, Modal, ScrollView, Platform } from "react-native"
import { X } from "lucide-react-native"
import { LinearGradient } from "expo-linear-gradient"
import { theme } from "../../constants/theme"

// 播放设置选项
const PLAY_TIMES = [
    { value: 1, label: "1次" },
    { value: 2, label: "2次" },
    { value: 3, label: "3次" },
]

const PLAY_INTERVALS = [
    { value: 2, label: "2秒" },
    { value: 3, label: "3秒" },
    { value: 5, label: "5秒" },
    { value: 8, label: "8秒" },
    { value: 10, label: "10秒" },
]

const PLAY_MODES = [
    { value: "both", label: "默认" },
    { value: "chinese", label: "仅中文" },
    { value: "english", label: "仅英文" },
]

export interface DictationSettings {
    playTimes: number
    playInterval: number
    playMode: string
}

interface DictationSettingsModalProps {
    visible: boolean
    settings: DictationSettings
    onClose: () => void
    onUpdateSettings: (key: keyof DictationSettings, value: any) => void
}

export function DictationSettingsModal({ visible, settings, onClose, onUpdateSettings }: DictationSettingsModalProps) {
    return (
        <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
            <View style={styles.modalOverlay}>
                <View style={styles.modalContent}>
                    <View style={styles.modalHeader}>
                        <Text style={styles.modalTitle}>听写设置</Text>
                        <TouchableOpacity style={styles.modalCloseButton} onPress={onClose}>
                            <X size={24} color={theme.colors.neutral.darkGray} />
                        </TouchableOpacity>
                    </View>

                    <ScrollView style={styles.settingsContainer}>
                        {/* 播放次数 */}
                        <View style={styles.settingSection}>
                            <Text style={styles.settingTitle}>播放次数</Text>
                            <View style={styles.settingOptions}>
                                {PLAY_TIMES.map((option) => (
                                    <TouchableOpacity
                                        key={option.value}
                                        style={[styles.settingOption, settings.playTimes === option.value && styles.settingOptionActive]}
                                        onPress={() => onUpdateSettings("playTimes", option.value)}
                                    >
                                        <Text
                                            style={[
                                                styles.settingOptionText,
                                                settings.playTimes === option.value && styles.settingOptionTextActive,
                                            ]}
                                        >
                                            {option.label}
                                        </Text>
                                    </TouchableOpacity>
                                ))}
                            </View>
                        </View>

                        {/* 播放间隔 */}
                        <View style={styles.settingSection}>
                            <Text style={styles.settingTitle}>播放间隔</Text>
                            <View style={styles.settingOptions}>
                                {PLAY_INTERVALS.map((option) => (
                                    <TouchableOpacity
                                        key={option.value}
                                        style={[styles.settingOption, settings.playInterval === option.value && styles.settingOptionActive]}
                                        onPress={() => onUpdateSettings("playInterval", option.value)}
                                    >
                                        <Text
                                            style={[
                                                styles.settingOptionText,
                                                settings.playInterval === option.value && styles.settingOptionTextActive,
                                            ]}
                                        >
                                            {option.label}
                                        </Text>
                                    </TouchableOpacity>
                                ))}
                            </View>
                        </View>

                        {/* 播放选项 */}
                        <View style={styles.settingSection}>
                            <Text style={styles.settingTitle}>播放选项</Text>
                            <View style={styles.settingOptions}>
                                {PLAY_MODES.map((option) => (
                                    <TouchableOpacity
                                        key={option.value}
                                        style={[styles.settingOption, settings.playMode === option.value && styles.settingOptionActive]}
                                        onPress={() => onUpdateSettings("playMode", option.value)}
                                    >
                                        <Text
                                            style={[
                                                styles.settingOptionText,
                                                settings.playMode === option.value && styles.settingOptionTextActive,
                                            ]}
                                        >
                                            {option.label}
                                        </Text>
                                    </TouchableOpacity>
                                ))}
                            </View>
                        </View>
                    </ScrollView>

                    <TouchableOpacity style={styles.confirmButton} onPress={onClose}>
                        <LinearGradient colors={theme.colors.primary.gradient} style={styles.confirmButtonGradient}>
                            <Text style={styles.confirmButtonText}>确定</Text>
                        </LinearGradient>
                    </TouchableOpacity>
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    modalOverlay: {
        flex: 1,
        backgroundColor: "rgba(0, 0, 0, 0.5)",
        justifyContent: "center",
        alignItems: "center",
    },
    modalContent: {
        width: "90%",
        maxHeight: "80%",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.extraLarge,
        overflow: "hidden",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowOffset: { width: 0, height: 5 },
                shadowOpacity: 0.5,
                shadowRadius: 10,
            },
            android: {
                elevation: 10,
            },
        }),
    },
    modalHeader: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        padding: theme.spacing.lg,
        borderBottomWidth: 1,
        borderBottomColor: theme.colors.neutral.lightGray,
    },
    modalTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.primary.default,
    },
    modalCloseButton: {
        padding: theme.spacing.sm,
    },
    settingsContainer: {
        padding: theme.spacing.lg,
    },
    settingSection: {
        marginBottom: theme.spacing.xl,
    },
    settingTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.md,
    },
    settingOptions: {
        flexDirection: "row",
        flexWrap: "wrap",
        gap: theme.spacing.sm,
    },
    settingOption: {
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
        borderRadius: theme.borderRadius.large,
        backgroundColor: theme.colors.neutral.lightGray,
        borderWidth: 1,
        borderColor: "transparent",
    },
    settingOptionActive: {
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        borderColor: theme.colors.primary.default,
    },
    settingOptionText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
    },
    settingOptionTextActive: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    confirmButton: {
        margin: theme.spacing.lg,
        borderRadius: theme.borderRadius.large,
        overflow: "hidden",
        ...Platform.select({
            ios: {
                shadowColor: theme.colors.primary.default,
                shadowOffset: { width: 0, height: 3 },
                shadowOpacity: 0.3,
                shadowRadius: 5,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    confirmButtonGradient: {
        paddingVertical: theme.spacing.lg,
        alignItems: "center",
        justifyContent: "center",
    },
    confirmButtonText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.white,
        fontWeight: theme.fontWeight.semiBold,
    },
})
